<template>
  <div>
    <home>
      <div slot="conter" class="topaa" data-attr="拍卖专场">
        <a href="#">
          <h2>拍卖专场</h2>
        </a>
      </div>
      <div slot="context">

        <table class="table table-bordered auction_home">
          <caption>

            <div class="block">
              <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="currentPage3"
                      :page-size="4"
                      layout="prev, pager, next, jumper"
                      :total="pages_number">
              </el-pagination>
            </div>
          </caption>
          <thead>
          <tr>
            <th>封面</th>
            <th>专场</th>
            <th>预展时间</th>
            <th>拍卖时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in auction_list">
            <td><img :src="item.cover" width="160px" height="160px"></td>
            <td>
              <router-link :to="{path:'/auction/index/'+item.id,query:{goods:encodeURIComponent(JSON.stringify(item))}}">{{item.title}}
              </router-link>
            </td>
            <td>{{item.preview_time[0] | renderTime}}-{{item.preview_time[1] | renderTime}}</td>
            <td>{{item.auction_time[0] | renderTime}}-{{item.auction_time[1] | renderTime}}</td>
            <td>
              <el-popover trigger="hover" placement="top">
              <p>商品状态: {{ item.status_title }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium" :type="tag[item.status]">{{ item.status_title }}</el-tag>
              </div>
            </el-popover>
            </td>
            <td class="tds">
              <button @click="CreateClick(index,item.id)" class="btn btn-primary">添加商品</button>
              |
              <button @click="ClickEdit(index)" class="btn btn-info">编辑</button>
              |
              <button @click="ClickDelete(index,item.id)" class="btn btn-danger">删除</button>
            </td>
          </tr>
          </tbody>
        </table>

      </div>
    </home>


  </div>
</template>

<script>
  import {getHomeAuction, DeleteHomeAuction} from "network/home"
  import Home from "./Home";

  export default {
    name: "HomeAuction",
    components: {Home},
    data() {
      return {
        auction_list: [],
        currentPage3: 1,
        auction_id: "",
        pages_number: 0,
        tag: {
          1: 'info',
          2: '',
          3: 'success',
          4: 'warning',
          5: 'danger'
        }
      }
    },
    created() {
      getHomeAuction().then(res => {
        this.auction_list = res.results
        this.auction_id = res.results[res.results.length - 1].id
        this.pages_number = res.count
        console.log(res);
      }, err => {
        console.log(err);
      })
    },
    methods: {
      ClickEdit(index) {
        let auction_list = this.auction_list[index]
        this.$router.push({
          path: '/auction/edit',
          query: {
            ...auction_list
          }
        })
        console.log(this.auction_list[index]);
      },
      ClickDelete(index, id) {
        DeleteHomeAuction(id).then(res => {
          console.log(id);
          if (res.status) {

            this.auction_list.splice(index, 1)
          }
          console.log(res);
        }, err => {
          console.log(err);
        })


      },
      CreateClick(index,aid) {
        let auction_list = encodeURIComponent(JSON.stringify(this.auction_list[index]))
        this.$router.push({path:'/auction/item/' + aid,query:{
            goods:auction_list
          }})
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        getHomeAuction(val).then(res => {
          if (this.auction_list === undefined) {
            return
          }
          this.auction_list = res.results
          console.log(res);
        }, err => {
          console.log(err);
        })
        console.log(`当前页: ${val}`);
      }
    },
    filters: {
      renderTime: function (value) {
        return new Date(+new Date(value) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      }
    }
  }
</script>

<style scoped>
  .tds button {
    padding: 5px 10px;
  }

  .auction_home {
    text-align: center;
    /*align-items: center;*/
    line-height: 185px;
  }
</style>